<template>

    <el-col class="score-and-comments-area" :span="9">
      <el-main class="score-area" style="margin-bottom: 20px;">
        <div class="title">
          <img v-if="mode === 'boss'" src="../../../../assets/image/score-red.png" alt="" style="width: 120px; margin-bottom: 10px;">
          <img v-if="mode === 'worker'" src="../../../../assets/image/score.png" alt="" style="width: 120px; margin-bottom: 10px;">
        </div>
        <div class="low-quality-hint" v-if="isLowQuality" style="position: absolute; left: 1%; top: 1%">
          <el-tag type="danger" effect="dark">低质量报告</el-tag>
        </div>
        <div class="low-quality-hint" v-if="isHighQuality" style="position: absolute; left: 1%; top: 1%">
          <el-tag type="success" effect="dark">高质量报告</el-tag>
        </div>
        <div class="score-content-area" :style="{backgroundColor: styleMode[mode].itemBg}" v-show="hasComment">
          <div class="final-score" style="display: flex; flex-direction: column">
                <span class="score-text"
                      style="font-weight: 600; font-size: 30px; margin-bottom: 8px;">
                  {{ evaluationForm.score }}&nbsp;分
                </span>
            <el-rate v-model="evaluationForm.score" disabled />
            <span class="all-vote-num" style="color: #777777; font-size: 13px; margin-top: 6px;">
                  {{ voteNum }}&nbsp;人已评价
                </span>
          </div>
          <div class="score-detail">
            <div class="score-item" v-for="(num, i) in scoreStageNum">
              <el-rate :value="(5 - i)" disabled />
              <span class="vote-num" style="color: #777777">{{ num }}&nbsp;人</span>
            </div>
          </div>
        </div>
        <div class="no-score-text" v-show="!hasComment" style="color: #757575">
          该报告暂无评分
        </div>
      </el-main>

      <slot name="submit-comment-area"></slot>

      <!-- 独立出来是为了滚动评论区时表头不动 -->
      <div class="title">
        <img v-if="mode === 'boss'" src="../../../../assets/image/comments-red.png" alt="" style="width: 80px; margin-bottom: 10px;">
        <img v-if="mode === 'worker'" src="../../../../assets/image/comment-area.png" alt="" style="width: 80px; margin-bottom: 10px;">
      </div>
      <el-main class="comments-area">
        <div class="comment-content-area" v-show="hasComment">
          <div class="comment-item" :style="{backgroundColor: styleMode[mode].itemBg}" v-for="(item, i) in evaluationForm.comments">
            <span class="username" style="color: #620013">{{ item.username }}</span>
            <el-rate :value="item.score" disabled />
            <span class="comment-content">{{ item.description }}</span>
            <div class="like-area" v-if="mode">
              <img src="../../../../assets/image/like-gray.png" v-if="item.isLoginUserLiked===0" alt=""
                   style="width: 20px" @click="handleLikeComment(item.id, i)">
              <img src="../../../../assets/image/like-red.png" v-else-if="mode === 'boss'" alt="" style="width: 20px"
                   @click="handleUnlikeComment(item.id, i)">
              <img src="../../../../assets/image/like-blue.png" v-else-if="mode === 'worker'" alt="" style="width: 20px"
                   @click="handleUnlikeComment(item.id, i)">
              <span class="like-count">{{ item.likeNum }}</span>
              <span class="author-like" v-show="item.isReportOwnerLiked===1">创作者觉得很赞</span>
            </div>
          </div>
        </div>
        <div class="no-score-text" v-show="!hasComment" style="color: #757575">
          该报告暂无评论
        </div>
      </el-main>


    </el-col>

</template>

<script>
import {Debounce} from "@/utils/Debounce";
import {likeComment, unlikeComment} from "@/api/report";

export default {
  name: "ReportCommentArea",
  props: {
    evaluationData: {
      default: undefined
    },
    mode: {
      default: 'boss'
    }
  },
  model: {

  },
  data(){
    return {
      // 统计分数段人数
      // 5星：5 / 4.5
      // 4星：4 / 3.5
      // 3星：3 / 2.5
      // 2星：2 / 1.5
      // 1星：1 / 0.5
      scoreStageNum: [
        0, 0, 0, 0, 0
      ],
      // 评价人数
      voteNum: 0,

      // 该报告的所有评价
      evaluationForm: {
        score: 0,
        comments: []
      },
      styleMode: {
        boss: {
          imgColor: 'red',
          itemBg: '#fffdfd'
        },
        worker: {
          imgColor: 'blue',
          itemBg: '#f9faff'
        }
      }
    }
  },
  computed: {
    hasComment() {
      // 是否有评价，用于对分数区和评论区进行占位提示
      return this.evaluationForm.comments.length !== 0;
    },

    isLowQuality() {
      // 低于三分算低质量
      return this.hasComment && this.evaluationForm.score < 3;
    },

    isHighQuality() {
      // 低于三分算低质量
      return this.hasComment && this.evaluationForm.score > 4;
    }
  },
  methods: {

    handleLikeComment: Debounce(function(commentID, ind) {
      likeComment({
        userid: sessionStorage.getItem('userid'),
        commentid: commentID
      }).then(res => {
        if (res.code === 200) {
          this.evaluationForm.comments[ind]['isLoginUserLiked'] = 1;
          this.evaluationForm.comments[ind]['likeNum']++;
        } else {
          this.$message.error('点赞失败');
        }
      })
    }, 500),

    handleUnlikeComment: Debounce(function(commentID, ind) {
      unlikeComment({
        userid: sessionStorage.getItem('userid'),
        commentid: commentID
      }).then(res => {
        if (res.code === 200) {
          this.evaluationForm.comments[ind]['isLoginUserLiked'] = 0;
          this.evaluationForm.comments[ind]['likeNum']--;
        } else {
          this.$message.error('取消点赞失败')
        }
      })
    }, 500),

  },
  watch: {
    evaluationData(res){
      if(res.code === 200){
        const scoreStageNum = [0, 0, 0, 0, 0];
        let voteNum = 0;
        this.evaluationForm.score = Number(res.data.score.toFixed(1));
        for (const comment of res.data.comments) {
          this.evaluationForm.comments.push(comment);

          // 统计分数段人数
          // 5星：5 / 4.5
          // 4星：4 / 3.5
          // 3星：3 / 2.5
          // 2星：2 / 1.5
          // 1星：1 / 0.5
          scoreStageNum[5 - Math.ceil(comment.score)]++;
          voteNum++;
        }
        this.scoreStageNum = scoreStageNum;
        this.voteNum = voteNum;
      }

    }
  }
}
</script>

<style scoped>
.score-and-comments-area,
.score-area,
.comments-area,
.report-details-area {
  padding: 1% 1%;
  /*border: 1px solid #000;*/
}

.score-and-comments-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.score-area {
  max-height: 300px;
}

.score-content-area {
  min-height: 200px;
  max-height: 200px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
}

.score-item {
  display: flex;
  flex-direction: row;
  column-gap: 5px;
  margin-bottom: 5px;
}

.score-content-area,
.comment-item
{
  border-radius: 12px;
  box-shadow: rgba(90, 106, 140, 0.3) 0px 0px 6px;
/*  background: ;*/
}

.comments-area {
  max-height: 400px;
}

.comment-content-area {
  min-height: 200px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
}

.comment-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 5px;
  padding: 20px 20px;
  margin-bottom: 15px;

  box-shadow: rgba(90, 106, 140, 0.3) 0px 0px 6px;
  border-radius: 12px;
}

.comment-item * {
  text-align: left;
}

.like-area {
  display: flex;
  flex-direction: row;
  align-items: center;

  margin-top: 10px;
}

.like-area img:hover {
  cursor: pointer;
}

.like-area .like-count {
  margin-left: 3px;
}

.author-like {
  font-size: 12px;
  background: #e0e0e0;
  color: #6F6F6F;
  padding: 2px 4px;
  margin-left: 10px;
}

.author-like:hover {
  cursor: default;
}

</style>
